<template>
    <div>
        <!-- ref -->
        <p>{{hostName.name}} {{ageRef}}</p>
        <p ref='pref'>我是 p标签</p>
        <hr>
        <!-- toRef -->
        <p>{{name}}- {{age}} animal: - {{animalRef}}</p>

        <!-- toRefs -->
        <hr>
        <p>toRefs -- {{age}}  {{name}}</p>

        <ul>
            <li v-for="(v,index) in indexs" :key="index">{{v}}</li>
        </ul>
    </div>
</template>

<script>
    import {ref, reactive, toRef, toRefs} from 'vue';
    export default {
        name: 'Ref',
        setup() {
            const ageRef = ref(29);
            const hostName = reactive({
                name: 'jerry',
                age: 18
            })

            const nums = reactive({
                indexs: [1,2,3,4,5],
                age: 10,
                name: 'jack'
            })

            // toRef 只适用于响应式对象 不能用于普通对象

            const animalRef = toRef(hostName, 'age');

            // 必须使用 toRefs()返回响应式对象 若不是 将丢失响应式

            const torefs = () => toRefs(hostName);

            const numRef = () => toRefs(nums)

            setTimeout(() => {
                hostName.age = 20;
                nums.indexs.reverse();
            }, 1500)

            return {
                ageRef,
                hostName,
                animalRef,
                ...torefs(),
                ...numRef()
            }

        }
    }
</script>

<style scoped>

</style>